<template>
    <div id="app">
        <div class="title_background" v-if="$route.meta.isShowTitle">
            <div class="title" v-if="$route.meta.isShowTitle">{{$route.meta.title}}</div>
        </div>
        <!-- <img alt="Vue logo" src="./assets/notfound.png"> -->
        <!-- <HelloWorld msg="Welcome to Your Vue.js App"/>  -->
        <keep-alive include="Map">
            <router-view :socketMes='socketStr'/>
        </keep-alive>


        <!-- 下部选项条 -->
        <div style="height: 50px;z-index: 999" v-if="$route.meta.isShowTab">
            <van-tabbar v-model="active" router style="height: 50px;">
                <van-tabbar-item v-for="(item,index) in tabbars" :to="item.to" :icon="item.icon" :key="index">
                    <span :class="active===index?active:''">{{item.title}}</span>
                    <template slot="icon" slot-scope="props">
                        <img :src="props.active?item.active:item.normal"/>
                    </template>
                </van-tabbar-item>

            </van-tabbar>
        </div>
    </div>
</template>

<script>
    // import HelloWorld from './components/HelloWorld.vue'

    import bus from "./utils/bus"

    export default {
        name: 'App',
        // components: {
        //   HelloWorld
        // },
        data() {
            return {
                isShowIcon:false,
                msg: null,
                //ppi的值
                ppiValue: "",
                isShowTab: true,
                active: 0,
                websocket: null,
                socketStr: "",
                tabbars: [
                    {
                        title: '地图',
                        to: '/map',
                        normal: require('./assets/app/地图0.png'),
                        active: require('./assets/app/地图.png')
                    },
                    {
                        title: '报文',
                        to: '/chatlist',
                        normal: require('./assets/app/报文0.png'),
                        active: require('./assets/app/报文.png')
                    },
                    {
                        title: '高分',
                        to: '/gaofen',
                        normal: require('./assets/app/高分0.png'),
                        active: require('./assets/app/高分.png')
                    },
                    {
                        title: '任务',
                        to: '/task',
                        normal: require('./assets/app/任务0.png'),
                        active: require('./assets/app/任务.png')
                    },
                    {
                        title: '我的',
                        to: '/mine',
                        normal: require('./assets/app/我的0.png'),
                        active: require('./assets/app/我的.png')
                    }
                ]
            }
        },
        methods: {
            //打开websocket
            openSocketTest() {
                this.closeSocket();
                // websocket = new WebSocket("ws://192.168.0.121:5299/navigation?access_token=eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJzY29wZSI6WyJ0ZXN0Il0sImlkIjoxLCJleHAiOjE2MzQ4NzUyODYsImF1dGhvcml0aWVzIjpbInRlc3QiXSwianRpIjoiMWZjYTVlN2QtNDA2My00NWY2LTk4NmEtMjYwZWFhM2ZhYTJmIiwiY2xpZW50X2lkIjoiYmR0ZXN0IiwidXNlcm5hbWUiOiJ0ZXN0In0.B4ZEvzQo_UUQ_HZ4jN7H6fzuob2FPrcfezg31MajR7mUbyGjQ1Z89xL0szENMlZRwTFvhmzjTim06MfqPYfk7raChra3DQxowF_1ebU4x8y8SQKn_mQAQvJy2FQjVZZjzPnHvijPGV6NgQ0PqEHIGYSlFwe4DJ1q6PyPcvCKff3cBjhbyvo-vPYq_MtUu7m8O5fxloZJFb_xcVg7NR5mCp4wXJXWuzxBgHWZW38hoFOYtbQFz_2bdSvh75hU1_YHqkpSAHjG2gtXddthskYDpj-Qr0ZOazYljqR6p84zucCdyPChO9y6gxmHTwyM9AbIR7c3YpRK0ZT2Hqe5CjFjfA");
                this.websocket = new WebSocket("ws://192.168.0.121:5299/bdgf?access_token=bd+," + this.$systemMes.loginId);
                this.websocket.onopen = () => {
                    console.log("webSocket已打开")
                }
                this.websocket.onmessage = (evt) => {
                    console.log(evt);
                    console.log(JSON.parse(evt.data));
                    // appendMes('backMes', evt.data);
                    this.socketStr = evt.data;

                }

                this.websocket.onerror = (e) => {
                    // console.log(e);
                    this.websocket.onclose = e => {
                        console.log('关闭了')
                    }
                }
                this.websocket.onclose = () => {
                    console.log("websocket已关闭");
                }
            },
            sendWebSocketText() {
                this.websocket.send(this.message);
            },
            closeSocket() {
                if (this.websocket) {
                    this.websocket.close();
                }
            },
            //全局通用的函数，返回上一页
            openUrl(dt) {
                let data = JSON.parse(dt);
                this.$router.push(data.url);
            },
            receiveDt(dt) {
                // console.log(dt);
                let data = JSON.parse(dt);
                console.log("收到的数据是", dt);
                bus.$emit("onmessage", data);

            },
            backToPage() {

            },

            backApi() {
                this.currentRouter = this.$route.path;
                //如果不是首页的话
                if ((this.currentRouter != "/") && (this.currentRouter != "/map")) {
                    if((this.currentRouter == "/chatlist") || (this.currentRouter == "/gaofen")
                    || (this.currentRouter == "/task") || (this.currentRouter == "/mine")){
                        this.active = 'map'
                        this.active = 0
                        this.$router.push("/map");
                    }else if(this.currentRouter == "/chatmember"){
                        this.active = 'chat';
                        this.active = 1;
                        this.$router.push("/chatlist");
                    }else if(this.currentRouter == "/addmember"){
                        this.$router.push("/chatmember");
                    }else if(this.currentRouter == "/memberinfo"){
                        this.$router.push("/chatmember");
                    }else if(this.currentRouter == "/chatinfo"){
                        this.$router.push("/chatlist");
                        this.active = 'chat';
                        this.active = 1;
                    } else {
                        this.$router.go(-1);
                    }
                    return 0;
                } else {
                    return 1;
                }
            },
            // calppi(){
            //   var width = document.getElementById("width").value;
            //   var height = document.getElementById("height").value;
            //   var inch = document.getElemntById("inch").value;
            //   var ppi = Math.sqrt(Math.pow(width,2)+Math.pow(height,2))/inch;
            //   this.ppiValue = ppi;
            //   console.log("ppi的值是",this.ppiValue);
            // }

        },
        created() {
        },
        mounted() {
            window.openUrl = this.openUrl;
            window.receiveDt = this.receiveDt;
            window.backToPage = this.backToPage;
            window.goBackPage = this.goBackPage;
            window.calppi = this.calppi;
            window.backApi = this.backApi;
            // console.log(this.$route);
            // console.log(!this.$route.path.indexOf('chatinfo'));

            // this.calppi();
        },
        watch: {
            socketStr: {
                handler(newVal, oldVal) {
                    console.log(newVal)
                }
            },
            $route(to, from) {
                // console.log(to);
                // console.log(this.active);
                if (to.path === '/chatinfo') {
                    this.isShowTab = false;
                } else {
                    this.isShowTab = true;
                }
                if (to.path === '/map') {
                    this.active = 'map'
                    this.active = 0
                }
                if (to.path === '/chatlist') {
                    this.active = 'chat'
                    this.active = 1
                }
                if (to.path === '/gaofen') {
                    this.active = 'gaofen'
                    this.active = 2
                    // this.$forceUpdate();

                }
                if (to.path === '/task') {
                    this.active = 'task'
                    this.active = 3
                }
                if (to.path === '/mine') {
                    this.active = 'mine'
                    this.active = 4
                }
                // if (to.path != '/login') {
                //     this.openSocketTest();
                // }
            },
            deep: true,

        },

    }
</script>
<style>
    html, body {
        height: 100vh;
        width: 100vw;
    }

    /* 禁用长按选中文字 */
    body {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    #app {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        /*text-align: center;*/
        color: #2c3e50;
        /* margin-top: 60px; */
    }

    * {
        box-sizing: border-box;
    }

    .title_background {
        height: 45px;
        display: flex;
        background-color: #03192b;
    }
    .title {
        /*height: 45px;*/
        /*display: flex;*/
        /*flex-direction: column;*/
        /*justify-content: center;*/
        /*align-items: center;*/
        /*background-color:#324157;*/
        margin: auto;
        /*text-align: center;*/
        color: white;
        background-color: #03192b;
    }

    .con {
        float: right !important;
        color: white;
        margin: auto 0.3em;
    }

    .el-tabs__nav-scroll {
        display: flex;
    }

    .el-tabs__nav {
        margin-left: auto;
        margin-right: 0.2rem;
    }

    .el-tabs__content {
        height: 100%;
        width: 100%;
        overflow-y: auto;
    }

    ul {
        /*display: flex;*/
        /*flex-direction: row;*/

    }

    ul li {
        height: 50px;
        flex: 1;
        display: flex;
        /*justify-content: center;*/
        align-items: center;
    }

    .underbox {
        position: absolute;
        bottom: 0;
    }

    .van-tabbar-item {
        /*color: #1989fa;*/
        color: white !important;
    }

    .van-tabbar-item--active {
        color: #64feff !important;
        background-color: transparent !important;
    }

    .van-tabbar {
        background-color: #03192b !important;
    }

</style>
